<template>
  <div class="role">
    <el-button size="medium" type="primary" plain @click="add">
		新增角色
	</el-button>
	<div class="role-table">
		<el-table :data="tableData" border style="width: 100%" max-height="100%">
		  <el-table-column prop="name" label="角色名称"> </el-table-column>
		  <el-table-column prop="nameZh" label="角色编码"> </el-table-column>
		  <el-table-column
		    :show-overflow-tooltip="true"
		    prop="description"
		    label="角色描述信息">
		  </el-table-column>
		  <el-table-column prop="enabled" label="是否启用">
		    <template slot-scope="scope">
		      <el-tag size="small" type="success" v-if="scope.row.enabled === 1"
		        >启用</el-tag
		      >
		      <el-tag size="small" v-else-if="scope.row.enabled === 0">禁用</el-tag>
		    </template>
		  </el-table-column>
		  <el-table-column label="操作">
		    <template slot-scope="scope">
		      <el-button size="small" type="text" @click="assignPerm(scope.row)"
		        >分配权限</el-button
		      >
		      <el-divider direction="vertical"></el-divider>
		      <el-button size="small" type="text" @click="update(scope.row)"
		        >编辑</el-button
		      >
		      <!-- <el-divider direction="vertical"></el-divider>
		      <el-button size="small" type="text" @click="handleDelete(scope.row)"
		        >删除</el-button
		      > -->
		    </template>
		  </el-table-column>
		</el-table>
	</div>


    <!-- 新增/编辑角色按钮 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :show-close="false"
      :title="dialogTitle"
    >
      <el-form
        :model="roleForm"
        :rules="rules"
        ref="roleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名" prop="nameZh">
          <el-input
            placeholder="请输入角色名"
            v-model="roleForm.nameZh"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色编码" prop="name">
          <el-input
            placeholder="请输入角色名编码，以ROLE_作为前缀"
            v-model="roleForm.name"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input
            placeholder="请输入角色描述信息"
            v-model="roleForm.description"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enabled">
          <el-radio-group v-model="roleForm.enabled">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBtnDialog('roleForm')"
          >确 定</el-button
        >
        <el-button @click="cancleBtn">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 分配权限抽屉 -->
    <el-drawer
      title="分配权限"
      :visible.sync="drawerLoading"
      direction="rtl"
      :show-close="false"
      :append-to-body="true"
      custom-class="demo-drawer"
      ref="menu"
    >
      <div class="drawer-ctn">
        <div class="tree-filter">
          <el-input
            style="width: 70%"
            placeholder="输入关键字搜索权限数据"
            v-model="filterText"
          >
          </el-input>
        </div>

        <el-tree
          class="filter-tree"
          :data="menuOptions"
          show-checkbox
          :default-expand-all="false"
          :filter-node-method="filterNode"
          ref="menu"
          node-key="id"
          empty-text="加载中，请稍后"
          :props="defaultProps"
          :default-checked-keys="checkedKeys"
          :check-strictly="checkStrictly"
        ></el-tree>
      </div>
      <div class="demo-drawer__footer">
        <el-button style="width: 60%" type="primary" @click="submitBtnDrawer" v-debounce
          >确 定
		</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //过滤变量
      filterText: "",
      //表数据
      tableData: [],

      checkStrictly: false,
      //是否展示抽屉
      drawerLoading: false,
      //抽屉中的角色id
      drawerRid: undefined,
      //数据权限
      permForm: {},
      //菜单列表
      menuOptions: [],
      //树控件数据显示设置
      defaultProps: {
        label: "name",
        children: "children",
      },
      //被选中的节点
      checkedKeys: [28, 29],
      //是否展示对话框
      dialogVisible: false,
      //对话框表单数据
      roleForm: {},
      systemNodeFlag: false,
      //校验规则
      rules: {
        name: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
        nameZh: [{ required: true, message: "请输入角色名", trigger: "blur" }],
        enabled: [
          { required: true, message: "请确定角色是否启用", trigger: "blur" },
        ],
      },
      //对话框标题
      dialogTitle: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.menu.filter(val);
    },
  },

  created() {
    this.initTable();
    this.initMenuList();
  },
  methods: {
    //新增按钮
    add() {
      this.reset();
      this.dialogVisible = true;
      this.dialogTitle = "新增角色";
    },
    //编辑按钮
    update(data) {
      this.dialogVisible = true;
      this.dialogTitle = "编辑角色";
      this.roleForm = Object.assign({}, data);
    },
    //删除按钮
    handleDelete(data) {
      this.$confirm("是否删除" + data.nameZh + "角色?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios.post("/sysRole/delete", { id: data.id }).then((res) => {
          if (res.status) {
            this.initTable();
          }
        });
      });
    },
    //对话框确定按钮
    submitBtnDialog(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.roleForm.id == undefined) {
            this.$axios.post("/sysRole/insert", this.roleForm).then((res) => {
              if (res.status) {
                this.initTable();
                this.dialogVisible = false;
                this.reset();
              }
            });
          } else {
            this.$axios.post("/sysRole/update", this.roleForm).then((res) => {
              if (res.status) {
                this.initTable();
                this.dialogVisible = false;
                this.reset();
              }
            });
          }
        }
      });
    },
    //对话框取消按钮
    cancleBtn() {
      this.dialogVisible = false;
      this.reset();
    },
    //重置表单数据
    reset() {
      this.roleForm = {
        id: undefined,
        name: undefined,
        nameZh: undefined,
        description: undefined,
        enabled: 1,
      };
      this.filterText = "";
    },

    //分配权限按钮
    assignPerm(data) {
      this.filterText = "";
      this.checkedKeys = [];
      this.drawerLoading = true;
      console.log(data);

      this.$axios
        .get("/sysRole/rolePerms", {
          params: {
            id: data.id,
          },
        })
        .then((res) => {
          if (res.status) {
            this.checkStrictly = true; 

            this.$nextTick(() => {
           
              this.$refs.menu.setCheckedKeys(res.data); 
              this.checkStrictly = false; 
            });
            console.log(res.data);
            // console.log("res data", res.data);
            // this.checkedKeys = this.deepCopy(res.data);
            // console.log("checkedKeys", this.checkedKeys);
            // this.$refs.menu.setCheckedKeys(res.data);
            // console.log(this.$refs.menu.setCheckedKeys(res.data));
            this.drawerRid = data.id;
          }
        });
    },

    //抽屉确定按钮
    submitBtnDrawer() {
      // 获取被选中的子节点id
      let selectedKey = this.$refs.menu.getCheckedKeys();

      let half = this.$refs.menu.getHalfCheckedKeys(selectedKey);
      let all = selectedKey.concat(half);

      console.log(all);

      console.log("all", all);
      this.$axios
        .post("/sysRole/handlePerms", {
          id: this.drawerRid,
          menusId: all,
        })
        .then((res) => {
          if (res.status) {
            this.drawerLoading = false;
            this.initTable();
            this.reset();
          }
        });
    },

    //获取菜单数据
    initMenuList() {
      this.$axios.get("/sysMenu/menuList").then((res) => {
        if (res.status) {
          this.menuOptions = res.data;
        }
      });
    },

    //初始化表数据
    initTable() {
      this.$axios.get("/sysRole/pageList").then((res) => {
        if (res.status) {
          this.tableData = res.data.list;
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
};
</script>

<style scoped>
	.role{
		height: 100%;
	}
	.role-table{
		height: 94%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}
	
.drawer-ctn {
  overflow-y: auto;
  height: 550px;
}
.tree-filter {
  margin: 5px 0px;
  padding: 5px 10px;
}
.demo-drawer__footer {
  width: 100%;
  position: relative;
  bottom: 10px;
  left: -100px;
  padding: 10px;
  text-align: right;
  background-color: white;
}
</style>